<template>
	<view class="">
		<view class="edgeInsetTop"></view>

		<wanl-select :list="hospitalList" label-key="title" value-key="id" title="选择服务类型" v-model="hospital"
			placeholder="请选择" @change="select($event,'hospital_id')">
			<view class="title flex align-center">
				<text>服务类型</text>
			</view>
		</wanl-select>

		<wanl-select :list="hospitalList" label-key="title" value-key="id" title="选择服务项目" v-model="hospital"
			placeholder="请选择" @change="select($event,'hospital_id')">
			<view class="title flex align-center">
				<text>服务项目</text>
			</view>
		</wanl-select>

		<wanl-select :list="hospitalList" label-key="title" value-key="id" title="选择服务人员" v-model="hospital"
			placeholder="请选择" @change="select($event,'hospital_id')">
			<view class="title flex align-center">
				<text>服务人员</text>
			</view>
		</wanl-select>

		<view class="items">
			<view class="title flex align-center">
				<text>服务前照片</text>
			</view>
			<view class="grid col-4 grid-square flex-sub" style="height: 80%;">
				<view class="bg-img" v-for="(image,index) in images" :key="index">
					<image :src="image" @tap="previewImage(images, index)" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="close(index)">
						<text class='wlIcon-shanchu2'></text>
					</view>
				</view>
				<view style="border: 1px dashed #c5c5c5;" @tap="chooseImg" v-if="images.length < 8">
					<text class="wlIcon-31paishe"></text>
				</view>
			</view>
		</view>

		<view class="items">
			<view class="title flex align-center">
				<text>服务后照片</text>
			</view>
			<view class="grid col-4 grid-square flex-sub" style="height: 80%;">
				<view class="bg-img" v-for="(image,index) in images" :key="index">
					<image :src="image" @tap="previewImage(images, index)" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="close(index)">
						<text class='wlIcon-shanchu2'></text>
					</view>
				</view>
				<view style="border: 1px dashed #c5c5c5;" @tap="chooseImg" v-if="images.length < 8">
					<text class="wlIcon-31paishe"></text>
				</view>
			</view>
		</view>

		<view class="items">
			<view class="title flex align-center">
				<text>客户评价</text>
			</view>
			<radio-group @change="radioChange">
				<label class="flex align-center margin-bottom-xs" v-for="(item, index) in items" :key="item.value">
					<radio :value="item.value" style="transform:scale(0.6)" />
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
			
		<view class="items">
			<view class="title flex align-center">
				<text>备注</text>
			</view>
			<view class="input">
				<input type="text" placeholder="" />
			</view>
		</view>

		<view class="safeAreaBottom"> </view>
		<view class="wanlian cu-bar tabbar solid-top foot text-df">
			<button @tap="addOrder" class="cu-btn lg bg-white margin-lr-bj text-bold text-lg" style="border: 1px solid #4cbd66;color: #4cbd66;"> 取消 </button>
			<button v-if="loading" class="cu-btn lg bg-green margin-lr-bj">
				<text class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text> 提交中...
			</button>
			<button v-else @tap="addOrder" class="cu-btn lg bg-green margin-lr-bj text-bold text-lg"> 再次上传 </button>
			<button v-else @tap="addOrder" class="cu-btn lg bg-green margin-lr-bj text-bold text-lg"> 提交 </button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hospitalList: [],
				hospital_id: '',
				hospital: '',

				images: [],
				items: [{
						value: 'USA',
						name: '满意',
						checked: 'true'
				},{
						value: 'USA',
						name: '基本满意',
						checked: 'true'
				},{
						value: 'USA',
						name: '不满意',
						checked: 'true'
				}]
			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option?.type == 1 ? '作废详情' : '服务项目确认'
			})
			this.getHospital()
		},
		methods: {
			select(d, name) {
				if (name == 'section_ids') {
					if (!this.hospital_id) {
						this.$wanlshop.msg('请先选择医院');
					} else {
						this.section_id = d.id;
					}
				}
				if (name == 'hospital_id') {
					this.hospital_id = d.id;
					uni.request({
						url: '/addons/internethospital/api.doctor/apply_section',
						method: 'POST',
						data: {
							hospital_id: d.id || this.hospital_id
						},
						success: res => {
							this.sectionList = res.data;
						}
					});
				}
			},
			async getHospital() {
				await uni.request({
					url: '/addons/internethospital/api.doctor/apply_hospital',
					method: 'POST',
					data: {
						city_id: uni.getStorageSync('cityid')
					},
					success: res => {
						this.hospitalList = res.data;
					}
				});
			},
			// 提交订单
			async addOrder() {

			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.wanlian,
	.safeAreaBottom {
		height: calc(128rpx + env(safe-area-inset-bottom)) !important;
	}

	.items {
		padding: 0 30rpx;

		.title {
			margin-bottom: 20rpx;
			height: 100rpx;
		}
		.input {
			background-color: #EDEDED;
			height: 100rpx;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			input {
				height: 80rpx;
				width: 100%;
			}
		}
	}

	.title {
		color: #333333;
		font-weight: 500;
		font-family: PingFang SC, PingFang SC;
	}

	.cu-form-group+.cu-form-group {
		border: none;
	}

	.wanlian {
		justify-content: space-between !important;
		background-color: #fff !important;

		>view {
			margin-left: 34rpx;

			text {
				display: inline-block;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #333333;
				line-height: 44rpx;
				font-weight: 400;

				&:nth-child(1) {
					color: #333333;
				}

				&:nth-child(2) {
					color: red;
				}
			}
		}

		button {
			width: 326rpx;
			height: 72rpx;
			border-radius: 10rpx;
		}
	}

	.switch-sex {
		transform: scale(0.7);
	}
</style>